<template>
  <el-table
    border
    table-layout="auto"
    cell-class-name="align-c"
    :data="userRoleList"
  >
    <el-table-column label="编号" prop="id" />
    <el-table-column label="资源名称" prop="name" />
    <el-table-column label="资源路径" prop="url" />
    <el-table-column label="描述" prop="description" />
    <el-table-column label="添加时间" prop="createTime">
      <template #default="{ row }">
        <span>{{ formateDate(row.createTime) }}</span>
      </template>
    </el-table-column>
  </el-table>
  <ElConfigProvider :locale="zhCn">
    <div class="page">
      <el-pagination
        v-model:current-page="RoleParams.pageNum"
        v-model:page-size="RoleParams.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="geyDat"
        @current-change="geyDat"
      />
    </div>
  </ElConfigProvider>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { resourceListApi } from "./api/index";
import { formateDate } from "@/utils";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
const total = ref(0);
const userRoleList = ref<IResourceModel[]>([]);
const RoleParams = reactive<IResourceList>({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  totalPage: 0,
  list: [],
});

const geyDat = () => {
  resourceListApi(RoleParams).then((res) => {
    if (res.code === 200) {
      userRoleList.value = res.data.list;
      total.value = res.data.total;
    }
  });
};
geyDat();
</script>
<style lang="less" scoped></style>
